<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="3">
          <el-input placeholder="请输入订单号" size="small" class="input-with-select" v-model="queryInfo.id" clearable
                    @clear="getMovieOrderList"/>
        </el-col>
        <el-col :span="4">
          <el-input placeholder="请输入手机号" size="small" class="input-with-select" v-model="queryInfo.mobile" clearable
                    @clear="getMovieOrderList"/>
        </el-col>
        <el-col :span="4">
          <el-select v-model="queryInfo.payStatus" placeholder="支付状态">
            <el-option label="全部" value=""></el-option>
            <el-option label="未支付" value="N"></el-option>
            <el-option label="已支付" value="S"></el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select v-model="queryInfo.orderStatus" placeholder="订单状态">
            <el-option label="全部" value=""></el-option>
            <el-option label="等待支付" value="N"></el-option>
            <el-option label="取消" value="C"></el-option>
            <el-option label="出票中" value="T"></el-option>
            <el-option label="出票成功" value="S"></el-option>
            <el-option label="已退款" value="R"></el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" size="small" style="margin-left: 10px;" @click="getMovieOrderList">搜索</el-button>
        </el-col>
      </el-row>
      <el-table :data="orderList" border stripe>
        <el-table-column label="订单号" prop="id" width="66"></el-table-column>
        <el-table-column label="城市" prop="cityName" width="66"></el-table-column>
        <el-table-column label="影院" prop="cinemaName"></el-table-column>
        <el-table-column label="电影" prop="movieName" width="100"></el-table-column>
        <el-table-column label="场次" prop="playTimeText" width="110"></el-table-column>
        <el-table-column label="支付" prop="payStatusText" width="58"></el-table-column>
        <el-table-column label="订单状态" prop="orderStatusText" width="70">
          <template slot-scope="scope">
            <span type="primary" v-if="scope.row.orderStatus=='T'" style="color:red"> {{
                scope.row.orderStatusText
              }}</span>
            <span type="primary" v-if="scope.row.orderStatus!='T'">{{ scope.row.orderStatusText }}</span>
          </template>
        </el-table-column>
        <el-table-column label="原始单价" prop="channelUnitPrice" width="69"></el-table-column>
        <el-table-column label="惠后单价" prop="orderUnitPrice" width="69"></el-table-column>
        <el-table-column label="原始金额" prop="channelAmount" width="69"></el-table-column>
        <el-table-column label="惠后金额" prop="amount" width="69"></el-table-column>
        <el-table-column label="券抵扣" prop="discount" width="58"></el-table-column>
        <el-table-column label="下单时间" prop="addTimeText" width="124"></el-table-column>
        <el-table-column label="接单人" width="78">
          <template slot-scope="scope">
            <span v-if="scope.row.processUserName!=null" style="color: #f368e0">{{ scope.row.processUserName }}</span>
            <el-button v-if="scope.row.payStatus=='S' && scope.row.orderStatus!='R' && scope.row.processUserName==null" type="primary" plain size="small" @click="jiedan(scope.row.id)">接单</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="78">
          <template slot-scope="scope">
            <el-button type="warning" size="small" @click="getMovieOrder(scope.row.id)">操作</el-button>
          </template>
        </el-table-column>
        <el-table-column label="手机号" prop="mobile" width="100"></el-table-column>
      </el-table>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="queryInfo.pageNo" :page-sizes="[5, 10, 20]"
                     :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </el-card>
    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false" size="300">
      <el-card>
        <el-descriptions title="基本信息" class="margin-top" :column="5" border>
          <el-descriptions-item label="订单号">{{ order.id }}</el-descriptions-item>
          <el-descriptions-item label="手机号">{{ order.mobile }}</el-descriptions-item>
          <el-descriptions-item label="支付状态">{{ order.payStatusText }}</el-descriptions-item>
          <el-descriptions-item label="支付方式">{{ order.payMethodText }}</el-descriptions-item>
          <el-descriptions-item label="订单状态">{{ order.orderStatusText }}</el-descriptions-item>
        </el-descriptions>
        <br/>
        <el-descriptions :title="order_title" class="margin-top" :column="2" border>
          <el-descriptions-item label="惠后单价">{{ order.orderUnitPrice }}</el-descriptions-item>
          <el-descriptions-item label="惠后金额">{{ order.orderAmount }}</el-descriptions-item>
          <el-descriptions-item label="原始单价">{{ order.channelUnitPrice }}</el-descriptions-item>
          <el-descriptions-item label="原始金额">{{ order.channelAmount }}</el-descriptions-item>
          <el-descriptions-item label="影院"><el-tag>{{ order.cinemaName }}</el-tag></el-descriptions-item>
          <el-descriptions-item label="城市">{{ order.cityName }}</el-descriptions-item>
          <el-descriptions-item label="电影"><el-tag>{{ order.movieName }}</el-tag></el-descriptions-item>
          <el-descriptions-item label="地址">{{ order.cinemaAddress }}</el-descriptions-item>
          <el-descriptions-item label="排期"><el-tag type="danger">{{ order.playTimeText }}</el-tag></el-descriptions-item>
          <el-descriptions-item label="版本">{{ order.edition }}</el-descriptions-item>
          <el-descriptions-item label="座位">
            <el-tag size="small" type="success">{{ order.seats }}</el-tag>
            <el-button v-if="order.canUploadTicketCode" type="warning" size="small" style="margin-left: 10px;" plain @click="unLockSeat(order.id)">解锁</el-button>
            <span style="color: red;" v-if="order.supportExchangeSeat=='N'">(<strong>不支持换坐</strong>)</span>
          </el-descriptions-item>
          <el-descriptions-item label="影厅">{{ order.hallName }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
      <el-card v-if="order.discountItemList && order.discountItemList.length>0">
        <el-collapse accordion>
          <el-collapse-item title="有卡券抵扣" name="1" v-for="(item) in order.discountItemList" :key="item.id">
            <el-descriptions class="margin-top" :column="2" border>
              <el-descriptions-item label="抵扣金额期">{{item.amount}}</el-descriptions-item>
              <el-descriptions-item label="卡号">{{item.couponNo}}</el-descriptions-item>
              <el-descriptions-item label="批次Id">{{item.batchId}}</el-descriptions-item>
              <el-descriptions-item label="批次名称">{{item.batchName}}</el-descriptions-item>
            </el-descriptions>
          </el-collapse-item>
        </el-collapse>
      </el-card>
      <el-form ref="form" :model="order" label-width="80px">
        <el-card>
          前台展示图片：<el-switch
              v-model="order.showPic"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="Y"
              inactive-value="N"
          ></el-switch>
        </el-card>
        <el-card>
          <el-upload
              action="/houtai/uploadImg"
              list-type="picture-card"
              :drag="true"
              :on-preview="handlePictureCardPreview"
              :on-success="handleImgSuccess"
              :show-file-list="true"
              :file-list="uploadList"
              :on-remove="handleRemove"
              :limit="order.quantity">
            <i slot="default" class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-card>
        <el-card v-if="order && order.otherAmount!=0">
          <el-collapse accordion>
            <el-collapse-item title="有爆米花套餐">
              <div v-for="item in order.bmhItemList" :key="item.id">套餐名称：{{item.name}}，价格：{{item.price}}，购买数量：{{item.qty}}</div>
            </el-collapse-item>
          </el-collapse>
        </el-card>
        <el-card style="height: 66px;text-align: right;">
          <el-form-item v-if="order.canUploadTicketCode">
            <el-button type="primary" @click="saveMovieTicketCode" size="medium">保存取票码</el-button>
          </el-form-item>
        </el-card>
        <el-card v-if="order.payStatus=='S'">
            <el-form-item label="取票码1" v-if="order.quantity>=1">
              <el-input v-model="order.xlh1" style="width: 200px"></el-input>
              |
              <el-input v-model="order.yzm1" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="取票码2" v-if="order.quantity>=2">
              <el-input v-model="order.xlh2" style="width: 200px"></el-input>
              |
              <el-input v-model="order.yzm2" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="取票码3" v-if="order.quantity>=3">
              <el-input v-model="order.xlh3" style="width: 200px"></el-input>
              |
              <el-input v-model="order.yzm3" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="取票码4" v-if="order.quantity>=4">
              <el-input v-model="order.xlh4" style="width: 200px"></el-input>
              |
              <el-input v-model="order.yzm4" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="取票码5" v-if="order.quantity>=5">
              <el-input v-model="order.xlh5" style="width: 200px"></el-input>
              |
              <el-input v-model="order.yzm5" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="订单备注">
              <el-input type="textarea" style="width: 70%;" v-model="order.remark"></el-input>
            </el-form-item>
        </el-card>

        <el-card style="height: 110px;text-align: right;" v-if="order.orderStatus=='T'">
          <el-collapse accordion>
            <el-collapse-item title="其他处理方式">
              <div><el-button type="primary" @click="toNldyp(order.id)" size="medium">转南里出票</el-button></div>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import Api from "@/api/Api.js";

export default {
    data() {
      return {
        drawer: false,
        dialogVisible: false,
        dialogImageUrl: '',
        disabled: false,
        queryInfo: {
          id: "",
          mobile: "",
          pageNo: 1,
          orderStatus: 'T',
          payStatus: 'S',
          pageSize: 20, // 页大小
        },
        quantity: 0,
        order: {
          ticketImg : ''
        },
        orderList: [],
        total: 0,
        uploadList: [],
        bmhList:[],
        order_title:'订单详情',
        muted:true
      };
    },
    created() {
        this.getMovieOrderList();
    },
    methods: {
      getMovieOrderList() {
        Api.movieOrderList(this.queryInfo).then((res) => {
          if (res.success) {
            this.orderList = res.data.records;
            this.total = res.data.total;
          } else {
            return this.$message.error("获取列表失败");
          }
        });
      },
      getMovieOrder(id) {
        this.drawer = true;
        Api.movieOrderDetail({'id': id}).then((res) => {
          if (res.success) {
            this.order = res.data;
            if(this.order.processUserName!=null){
              this.order_title = '订单详情（接单人：' + this.order.processUserName + ')';
            }else{
              this.order_title = '订单详情';
            }
            this.quantity = res.data.quantity;
            this.uploadList = res.data.ticketImgList;
            this.showUploadList();
          } else {
            return this.$message.error("获取订单失败");
          }
        });
      },
      unLockSeat(id) {
        Api.unLockSeat({'id': id}).then((res) => {
          if (res.success) {
            return this.$message.success("释放座位成功");
          } else {
            return this.$message.error("释放座位失败：" + res.msg);
          }
        });
      },
      jiedan(id) {
        Api.jiedan({'id': id}).then((res) => {
          if (res.success) {
            this.$message.success("接单成功，请尽快处理");
            this.getMovieOrderList();
          } else {
            return this.$message.error("释放座位失败：" + res.msg);
          }
        });
      },
      toNldyp(id) {
        Api.toNldyp({'id': id}).then((res) => {
          if (res.success) {
            this.$message.success("转南里成功");
            this.getMovieOrderList();
          } else {
            return this.$message.error(res.msg);
          }
        });
      },
      setSupportRefund() {
        Api.setSupportRefund({'id':this.order.id, 'status':this.order.supportRefund}).then((res) => {
          if (res.success) {
            this.$message.success("设置成功");
          } else {
            return this.$message.error("设置失败：" + res.msg);
          }
        });
      },
      saveMovieTicketCode(id) {
        Api.saveMovieTicketCode(this.order).then((res) => {
          if (res.success) {
            this.$message.success("保存成功");
            this.getMovieOrderList();
          } else {
            return this.$message.error("保存失败：" + res.msg);
          }
        });
      },
      handleSizeChange(pageSize) {
        this.queryInfo.pageSize = pageSize;
        this.getMovieOrderList();
      },
      handleCurrentChange(pageNo) {
        this.queryInfo.pageNo = pageNo;
        this.getMovieOrderList();
      },

      handleRemove(file, fileList) {
        console.log(file.url);
        var newUploadList = [];
        this.uploadList.forEach(function (v, index) {
          if(file.url!=v.url){
            newUploadList.push(v);
          }
        });
        this.uploadList = newUploadList;
        this.showUploadList();
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleImgSuccess(res, file) {
        this.uploadList.push(res.data);
        this.showUploadList();
      },
      showUploadList(){
        var tm = [];
        this.uploadList.forEach(function (v, index) {
          console.warn(v.url,index);
          tm.push(v.url);
        });
        if(tm.length>0){
          this.order.ticketImg = tm.join(',');
        }else {
          this.order.ticketImg = '';
        }
      }
    }
};
</script>

<style lang="less" scoped>
.el-upload-dragger {
  background-color: #fff;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  box-sizing: border-box;
  width: 180px;
  height: 150px;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
}
.logo_pic {
  max-width: 100px;
}
.upload_img {
  width: 148px;
  height: 148px;
  object-fit: cover;
  border-radius: 6px;
  margin-right: 20px;
}
</style>
